<template>
  <div>
    <!-- 历史价格 -->
    <el-dialog
      v-el-drag-dialog
      title="历史价格周期（挂牌价）"
      :visible.sync="visible"
      width="1024px"
    >
      <div v-loading="$loadingPlugin.getDeaultData" class="chart-body">
        <Charts :options="option" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryMarketHistoricalPrice } from '@/api'
  import Charts from '@/components/Charts'

  export default {
    name: 'historicalPrice',
    components: {
      Charts
    },
    data() {
      return {
        visible: false,
        option: {}
      }
    },

    methods: {
      open(temp) {
        this.getDeaultData(temp)
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDeaultData(temp) {
        const res = await queryMarketHistoricalPrice({ goodsId: temp.goodsId })
        res.data && this._setPieOpitons(res.data)
      },
      _setPieOpitons(data) {
        const xAxis = []
        const callCenter = []
        const weixin = []

        for (const index in data.xAxis) {
          xAxis.push(data.xAxis[index].cycNumber)
        }

        for (const key in xAxis) {
          let exist = false
          for (let i = 0; i < data.callCenter.length; i++) {
            const item = data.callCenter[i]
            if (item.cycNumber === xAxis[key]) {
              callCenter.push(item.price0)
              exist = true
              break
            }
          }
          if (!exist) {
            callCenter.push(0)
          }
        }
        for (const key in xAxis) {
          let exist = false
          for (let i = 0; i < data.weixin.length; i++) {
            const item = data.weixin[i]
            if (item.cycNumber === xAxis[key]) {
              weixin.push(item.price0)
              exist = true
              break
            }
          }
          if (!exist) {
            weixin.push(0)
          }
        }
        this.option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            hideDelay: 50,
            padding: 10,
            textStyle: {
              color: 'white',
              decoration: 'none',
              fontFamily: 'Verdana, sans-serif',
              fontSize: 15,
              fontStyle: 'italic'
            },
            formatter: function(params, ticket, callback) {
              let res = params[0].name
              for (let i = 0; i < params.length; i++) {
                res += '<br/>' + params[i].seriesName + ':' + params[i].value.toFixed(2)
              }
              setTimeout(function() {
                // 仅为了模拟异步回调
                callback(ticket, res)
              }, 0)
              return '正在加载中...'
            }
          },
          legend: {
            data: ['呼叫中心价格', '微信价格']
          },
          xAxis: {
            boundaryGap: false,
            splitLine: { show: false }, // 去除网格线
            name: '周期',
            data: xAxis
          },
          yAxis: {
            splitLine: { show: false }, // 去除网格线
            type: 'value',
            name: '价格/元',
            min: 0
          },
          calculable: false,
          series: [
            {
              type: 'line',
              smooth: true,
              name: '呼叫中心价格',
              data: callCenter,
              lineStyle: {
                color: '#67c23a' // 折线颜色
              }
            },
            {
              type: 'line',
              smooth: true,
              name: '微信价格',
              data: weixin,
              lineStyle: {
                color: '#fec163' // 折线颜色
              }
            }
          ]
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
.chart-body {
  height: 400px;
}
</style>
